<script setup lang="ts">
import { reactive } from 'vue'
import { splitNum } from '../scripts/splitNum.ts'

splitNum()

let num = reactive({
  n1: '',
  n2: '',
  n3: '',
  n4: '',
  n5: '',
  n6: '',
  n7: '',
  n8: '',
  n9: '',
  n10: '',
  n11: '',
  n12: '',
})

const numArr = ['n1','n2','n3','n4','n5','n6','n7','n8','n9','n10','n11','n12']

const options = ['', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
const tds = [
  '十亿',
  '亿',
  '千万',
  '百万',
  '十万',
  '万',
  '千',
  '百',
  '十',
  '个',
  '角',
  '分',
]
</script>

<template>
  <div>
    <table border="1" cellspacing="0" width="120">
      <tr id="name">
        <td v-for="(item, index) in tds" :key="index">{{ item }}</td>
      </tr>
      <tr>
        <td v-for="(item0, index0) in numArr" :key="index0">
          <select v-model="num[item0]">
            <option v-for="(item, index) in options" :value="item" :key="index">
              {{ item }}
            </option>
          </select>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
table {
  border-color: red;
}

td {
  height: 40px;
  width: 40px;
  text-align: center;
}

select {
  width: 40px;
  height: 40px;
  outline: none;
  border: none;
  text-align: center;
}
</style>
